<template>
  <div class="bgc">
    <!-- 头部 -->
    <div class="baibai">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item label="区域搜索:">
          <el-input v-model="params.name" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit(params.name)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 主体内容  新建 -->
    <div class="result">
      <div class="operation">
        <el-row>
          <el-button
            size="medium"
            icon="el-icon-circle-plus-outline"
            class="one"
            @click="dialogVisible = true"
          >新建</el-button>
        </el-row>
      </div>
      <!-- 表格数据 -->
      <div>
        <template>
          <el-table
            :data="region"
            style="width:1127px"
            :row-style="{ height: '44px' }"
            :cell-style="{ padding: '3px' }"
          >
            <el-table-column
              label="序号"
              type="index"
              :index="indexMethod"
              width="80"
            />
            <el-table-column prop="name" label="区域名称" width="283" />
            <el-table-column prop="nodeCount" label="点位数" width="282" />
            <el-table-column
              prop="remark"
              label="备注说明"
              width="282"
            />
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  class="detail"
                  @click="handleClick(scope.row)"
                >查看详情</el-button>
                <el-button
                  type="text"
                  class="detail"
                  @click="modify(scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  class="piramy"
                  @click="del(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>

    <!-- 分页 -->
    <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-col class="pstion">
        共{{ totalCount }}条记录
        第{{ params.pageIndex }}/{{ totalPage }}页
      </el-col>
      <el-pagination
        :page-size="params.pageSize"
        :total="totalCount"
        :current-page="params.pageIndex"
        layout="prev,next"
        prev-text="上一页"
        next-text="下一页"
        @current-change="currentChangeFn"
      />
    </el-row>

    <!-- 新建 dialog -->
    <el-dialog
      title="新增区域"
      :visible="dialogVisible"
      width="630px"
      :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="adddata" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称:" prop="regionName" label-width="140px">
          <el-input v-model="adddata.regionName" placeholder="请输入" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="备注说明:" prop="remark" label-width="140px">
          <el-input v-model="adddata.remark" :rows="3" type="textarea" maxlength="40" show-word-limit placeholder="请输入备注(不超过40字)" />
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onSubmitTwo">确 定</el-button>
      </template>
    </el-dialog>

    <!-- 查看详情 dialog -->
    <el-dialog
      title="区域详情"
      :visible="Viewdetails"
      width="630px"
      @close="closeFn"
    >
      <el-form label-width="140px">
        <el-form-item label="区域名称:" class="col">
          {{ formtwo.name }}
        </el-form-item>
        <el-form-item label="包含点位:">
          <template>
            <el-table
              :data="formtwo"
              style="width: 630px"
              class="tab"
            >
              <el-table-column
                label="序号"
                width="80"
                type="index"
                :index="indexMethod"
              />
              <el-table-column
                prop="name"
                label="点位名称"
                width="158"
              />
              <el-table-column
                prop="vmCount"
                label="数量"
                width="158"
              />
            </el-table>
          </template>
        </el-form-item>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="Viewdetails = false">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!-- 修改 dialog -->
    <!-- 新建 dialog -->
    <el-dialog
      :title="title"
      :visible="modifydialog"
      width="630px"
      :before-close="handleClose"
    >
      <el-form ref="ruleForm" :model="adddata" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称:" prop="regionName" label-width="140px">
          <el-input v-model="adddata.regionName" placeholder="请输入" maxlength="15" show-word-limit />
        </el-form-item>
        <el-form-item label="备注说明:" prop="remark" label-width="140px">
          <el-input v-model="adddata.remark" :rows="3" type="textarea" maxlength="40" show-word-limit placeholder="请输入备注(不超过40字)" />
        </el-form-item>
      </el-form>
      <template slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="onSubmitTwo">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// ModifyArea
import { AreaList, newlyAdded, AreaDetails, ModifyArea, delArea } from '@/api'
export default {
  data() {
    return {
      id: '',
      // 校验规则
      rules: {
        regionName: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入', trigger: 'change' }
        ]
      },
      // 修改 dialog
      modifydialog: false,
      // 新建 dialog
      dialogVisible: false,
      // 查看闲情 dialog
      Viewdetails: false,
      // 区域列表 需要数据
      totalCount: 1, // 总数量
      totalPage: 1, // 总页数
      params: {
        pageIndex: 1, // 当前页码
        pageSize: 10 // 每页条数
      },

      region: [], // 区域总数据

      // 新增请求参数
      adddata: {
        regionName: '',
        remark: ''
      },

      // 查看详情 所需数据
      form: {
        name: '',
        nodeCount: '',
        remark: ''
      },
      // 点位详情
      formtwo: []
    }
  },
  computed: {
    title() {
      return this.id ? '修改区域' : '新增区域'
    }
  },
  created() {
    this.getAreaList(this.params)
  },
  methods: {
    // 删除提示
    del(val) {
      // console.log(val)
      // 友好提示
      this.$confirm('确定删除该区域么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delArea(val.id)
        // 成功提示
        this.$message.success('删除区域成功')
        // 刷新页面
        this.getAreaList()
      }).catch(() => {
        // 成功提示
        this.$message.error('区域下存在点位，不能删除')
      })
    },
    // 序号
    indexMethod(index) {
      return index + 1
    },
    closeFn() {
      this.Viewdetails = false
    },
    // 点击查看详情 传回数据  接口是点位搜索
    async handleClick(val) {
      console.log(val)
      // this.regionId = val.id
      this.Viewdetails = true
      const res = await AreaDetails({
        pageIndex: this.params.pageIndex,
        pageSize: this.params.pageSize,
        regionId: val.id
      })
      // console.log(res)
      this.formtwo = res.currentPageRecords
      // console.log(this.formtwo)
    },
    // 封装区域总数据
    async getAreaList() {
      const res = await AreaList(this.params)
      // console.log(res)
      this.region = res.currentPageRecords
      this.totalCount = Number(res.totalCount)
      this.totalPage = res.totalPage
    },
    // 修改
    async modify(val) {
      // console.log(val)
      // 点击修改行数据时 拿到修改 所需id 赋值给data自己的数据 下方判断
      this.id = val.id
      this.dialogVisible = true
      this.adddata.regionName = val.name
      this.adddata.remark = val.remark
      // console.log(this.adddata)
    },
    // 新建
    onSubmitTwo() {
      // 兜底校验
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        // 判断数据中有无id 分辨是 新增 还是 修改
        if (!this.id) {
          // 新增逻辑  调用接口
          await newlyAdded(this.adddata)
        } else {
          // 修改逻辑  调用接口
          await ModifyArea(this.adddata, this.id)
        }
        // 友好提示
        this.$message.success(this.title + '成功')
        // 更新页面
        this.getAreaList()
        // 关闭弹窗
        this.handleClose()
      })
    },
    // 查询
    onSubmit() {
      this.getAreaList(this.params)
    },
    // 翻页 更新数据
    currentChangeFn(val) {
      this.params.pageIndex = val
      this.getAreaList()
    },
    // 关闭新建 dialog
    handleClose() {
      // 关闭清空表单
      this.$refs.ruleForm.resetFields()
      // 重复编辑 添加 时 只显示编辑部门 关闭时清空状态
      this.adddata = {
        regionName: '',
        remark: ''
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>

  //去掉表格/*头部边框*/
::v-deep .el-table thead tr th.is-leaf{
    border: 0px solid #EBEEF5;
    border-right: none;
    padding: 0;
}
.baibai{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 64px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
}
.operation {
    // margin-bottom: 20px;
    .one {
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      color: #fff;
    }
}
// 新建
.result {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  .operation {
    margin-bottom: 20px;
    .one {
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      color: #fff;
    }
    .two{
          background-color: #fbf4f0!important;
    }
  }
}
.pstion{
    color: #dbdfe5;
  }
.piramy {
    color: #ff5a5a;
}
.dialog-footer {
  color: #ff9743;
}
</style>
